<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易银行</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">

    账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;户:<input placeholder="账户" v-model="accountid" @blur="showemail()"><br>
    邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:<input placeholder="邮箱" v-model="email"><br>
    金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;额:<input placeholder="余额" v-model="money">  <br>
    转出账户:<input placeholder="转出账户" v-model="toAccountid">  <br>

    <button @click="openAccount">开户</button>
    <button @click="queryAccount">查询</button>
    <button @click="deposite">存款</button>
    <button @click="withdraw"> 取款</button>
    <button @click="transfer">转账</button>
    <br>


    账户：<p>{{account.accountid}}</p>
    余额：<p>{{account.balance}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            accountid: '',
            money: '',
            email: '',
            toAccountid: '',
            account: {accountid: '', balance: '',}, // 初始化
        },
        methods: {
            showemail(){
              var params=new URLSearchParams();
              params.append("accountid",this.accountid);
              axios.post('account.action?op=query', params).then(result => {
                  if (result.data.code === 1) {
                      this.email=result.data.obj.email;
                  }else {
                      alert("该账号不存在");
                      this.accountid = '';
                      this.email = '';
                  }
              })
            },
            // 开户
            openAccount() {
                var params = new URLSearchParams();
                params.append("money", this.money);
                axios.post('account.action?op=openAccount', params)
                    .then(result => {
                        let jm = result.data;
                        if (jm.code === 1) {
                            this.account = jm.obj;

                        }
                    });
            },
            // 查询
            queryAccount() {
                var params = new URLSearchParams();
                params.append("accountid", this.accountid);
                axios.post('account.action?op=findAccount', params)
                    .then(result => {
                        let jm = result.data;
                        if (jm.code === 1) {
                            this.account = jm.obj;
                        }
                    });
            },
            // 存款
            deposite() {
                var params = new URLSearchParams();
                params.append("accountid", this.accountid);
                params.append("money", this.money);
                axios.post('account.action?op=deposite', params)
                    .then(result => {
                        let jm = result.data;
                        if (jm.code === 1) {
                            this.account = jm.obj;
                        }
                    });
            },
            // 取款
            withdraw() {
                var params = new URLSearchParams();
                params.append("accountid", this.accountid);
                params.append("money", this.money);
                axios.post('account.action?op=withdraw', params)
                    .then(result => {
                        let jm = result.data;
                        if (jm.code === 1) {
                            this.account = jm.obj;
                        }
                    });
            },
            // 转账
            transfer() {
                var params = new URLSearchParams();
                params.append("accountid", this.accountid);
                params.append("money", this.money);
                params.append("toaccountid", this.toAccountid);
                axios.post('account.action?op=transfer', params)
                    .then(result => {
                        let jm = result.data;
                        if (jm.code === 1) {
                            this.account = jm.obj;
                        }
                    });
            },
        },
    })
</script>
</body>
</html>